/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useState } from 'react';
import { StatusBar, useColorScheme } from 'react-native';
import { Provider } from '@ant-design/react-native';
import { PortalProvider } from '@gorhom/portal';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import LoginScreen from './src/screens/LoginScreen';
import DetailScreen from './src/screens/DetailScreen';
import SafeAreaWrapper from './src/components/SafeAreaWrapper';
import SafeAreaDebug from './src/components/SafeAreaWrapper/debug';

// 扩展屏幕类型
type ScreenType = 'login' | 'detail' | string;

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  const [currentScreen, setCurrentScreen] = useState<ScreenType>('login');
  const [currentRoute, setCurrentRoute] = useState<string>('');

  const navigateToDetail = () => {
    setCurrentScreen('detail');
    setCurrentRoute('');
  };

  const navigateToLogin = () => {
    setCurrentScreen('login');
    setCurrentRoute('');
  };

  const navigateToScreen = (route: string) => {
    setCurrentScreen('detail');
    setCurrentRoute(route);
  };

  // 动态渲染页面组件
  const renderCurrentScreen = () => {
    if (currentScreen === 'login') {
      return <LoginScreen onNavigateToDetail={navigateToDetail} />;
    } else if (currentScreen === 'detail') {
      return <DetailScreen
        onNavigateToLogin={navigateToLogin}
        onNavigateToScreen={navigateToScreen}
        currentRoute={currentRoute}
      />;
    }
  };

  return (
    <SafeAreaProvider>
      <Provider>
        <PortalProvider>
          <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
          <SafeAreaWrapper
            backgroundColor="#f5f5f5"
            showTopSafeArea={false} // 顶部由Header组件处理
            showBottomSafeArea={true} // 底部需要处理
          >
            {renderCurrentScreen()}
            {/* 临时添加调试组件，测试完成后可以移除 */}
            {/* <SafeAreaDebug /> */}
          </SafeAreaWrapper>
        </PortalProvider>
      </Provider>
    </SafeAreaProvider>
  );
}

export default App;
